let layer = layui.layer;
let form = layui.form;

function getPubData() {
    $.ajax({
        type: "get",
        url: "/my/article/cates",
        success: function (res) {
            if (res.status !== 0) return layer.msg(res.message);
            let htmlStr = template('tpl-cate', res);
            $('[name=cate_id]').html(htmlStr);
            form.render();
        }
    })
}
getPubData();
initEditor();
// 1. 获取图片
var $image = $('#image')

// 2. 裁剪选项
var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options);
$("#img_change").on("click", function () {
    // console.log(1);
    $("#file").click();
})
$("#file").on("change", function (e) {
    const file_img = this.files;
    // return console.log(this,$(this));
    if (file_img.length < 0) layer.msg("请选择图片");
    const img_url = URL.createObjectURL(file_img[0]);
    $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', img_url) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
    // 将value值清空
    e.target.value = ''
})
let art_state = '已发布';
$('#btnSave2').on('click', function () {
    art_state = '草稿'
})
$('#form-pub').on('submit', function (e) {
    // 1. 阻止表单的默认提交行为
    e.preventDefault()
    // 2. 基于 form 表单，快速创建一个 FormData 对象
    var fd = new FormData($(this)[0])
    // 3. 将文章的发布状态，存到 fd 中
    fd.append('state', art_state)
})
 $('#form-pub').on('submit', function (e) {
     // 1. 阻止表单的默认提交行为
     e.preventDefault()
     // 2. 基于 form 表单，快速创建一个 FormData 对象
     var fd = new FormData($(this)[0])
     // 3. 将文章的发布状态，存到 fd 中
     fd.append('state', art_state)
     // 4. 将封面裁剪过后的图片，输出为一个文件对象
     $image
         .cropper('getCroppedCanvas', {
             // 创建一个 Canvas 画布
             width: 400,
             height: 280
         })
         .toBlob(function (blob) {
             // 将 Canvas 画布上的内容，转化为文件对象
             // 得到文件对象后，进行后续的操作
             // 5. 将文件对象，存储到 fd 中
             fd.append('cover_img', blob)
             // 6. 发起 ajax 数据请求
         })
 })
 function publishArticle(fd) {
     $.ajax({
         method: 'POST',
         url: '/my/article/add',
         data: fd,
         // 注意：如果向服务器提交的是 FormData 格式的数据，
         // 必须添加以下两个配置项
         contentType: false,
         processData: false,
         success: function (res) {
             if (res.status !== 0) {
                 return layer.msg('发布文章失败！')
             }
             layer.msg('发布文章成功！')
             // 发布文章成功后，跳转到文章列表页面
             location.href = '/article/art_list.html'
         }
     })
 }
 $('#form-pub').on('submit', function (e) {
     // 1. 阻止表单的默认提交行为
     e.preventDefault()
     // 2. 基于 form 表单，快速创建一个 FormData 对象
     var fd = new FormData($(this)[0])
     // 3. 将文章的发布状态，存到 fd 中
     fd.append('state', art_state)
     // 4. 将封面裁剪过后的图片，输出为一个文件对象
     $image
         .cropper('getCroppedCanvas', {
             // 创建一个 Canvas 画布
             width: 400,
             height: 280
         })
         .toBlob(function (blob) {
             // 将 Canvas 画布上的内容，转化为文件对象
             // 得到文件对象后，进行后续的操作
             // 5. 将文件对象，存储到 fd 中
             fd.append('cover_img', blob)
             // 6. 发起 ajax 数据请求
             publishArticle(fd)
             window.parent.$("#list").click();
         })
 })